<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="https://www.12306.cn/index/images/favicon.ico" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国铁路12306网站</title>

</head>

<body>
    <div id="main">
        <!-- 头部 -->
        <div class="header">
            <!-- 顶部logo、搜索区以及账户信息区 -->
            <div class="wrapper">
                <!-- 头部内容 -->
                <div class="header-content">
                    <!-- logo区域 -->
                    <h1 class="logo">
                        <a href="12306.html">中国铁路12306</a>
                    </h1>
                    <div class="header-right">
                        <!-- 搜索部分 -->
                        <div class="search">
                            <!-- 搜索框 -->
                            <div class="search-bd">
                                <input class="search-input" type="text" placeholder="搜索车票、餐饮、常旅客、相关规章" />
                            </div>
                            <!-- 搜索按钮 -->
                            <a href="#" class="search-btn">
                                <span class="icon icon-search">
                                </span>
                            </a>
                        </div>
                        <!-- 头部右侧菜单 -->
                        <ul class="menu">
                            <li class="menu-item"><a href="#" class="menu-nav-hd">无障碍</a></li>
                            <li class="menu-item menu-line">|</li>
                            <li class="menu-item"><a href="#" class="menu-nav-hd">爱心版</a></li>
                            <li class="menu-item menu-line">|</li>
                            <li class="menu-item"><a href="#" class="menu-nav-hd">English&nbsp;<i class="caret"></i>
                                </a></li>
                            <li class="menu-item menu-line">|</li>
                            <li class="menu-item"><a href="#" class="menu-nav-hd">我的12306&nbsp;<i
                                        class="caret"></i></a></li>
                            <li class="menu-item menu-line">|</li>
                            <li class="menu-item"><a href="#">登录</a><a href="#" class="ml">注册</a>
                                </a></li>
                        </ul>
                    </div>
                </div>

            </div>
            <!-- 导航 -->
            <div class="nav-box">
                <ul class="nav">
                    <li class="nav-item active"><a href="#" class="nav-link">首页</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">车票<i class="icon icon-down"></i></a></li>
                    <li class="nav-item"><a href="#" class="nav-link">团购服务<i class="icon icon-down"></i></a></li>
                    <li class="nav-item"><a href="#" class="nav-link">会员服务<i class="icon icon-down"></i></a></li>
                    <li class="nav-item"><a href="#" class="nav-link">站车服务<i class="icon icon-down"></i></a></li>
                    <li class="nav-item"><a href="#" class="nav-link">商旅服务<i class="icon icon-down"></i></a></li>
                    <li class="nav-item"><a href="#" class="nav-link">出行指南<i class="icon icon-down"></i></a></li>
                    <li class="nav-item"><a href="#" class="nav-link">信息查询<i class="icon icon-down"></i></a></li>
                </ul>
            </div>
        </div>
        <!-- 轮播区域 -->
        <div class="banner">
            <!-- 轮播图 -->
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"
                        style="background: url(&quot;https://www.12306.cn/index/images/pic/banner20201223.jpg&quot;) center center no-repeat; float: left; width: 1200px;">
                    </div>
                    <div class="swiper-slide"
                        style="background: url(&quot;https://www.12306.cn/index/images/pic/banner20200707.jpg&quot;) center center no-repeat; float: left; width: 1200px;">
                    </div>

                    <div class="swiper-slide"
                        style="background: url(&quot;https://www.12306.cn/index/images/pic/banner0619.jpg&quot;) center center no-repeat; float: left; width: 1200px;">
                    </div>
                    <div class="swiper-slide"
                        style="background: url(&quot;https://www.12306.cn/index/images/pic/banner26.jpg&quot;) center center no-repeat; float: left; width: 1200px;">
                    </div>
                    <div class="swiper-slide"
                        style="background: url(&quot;https://www.12306.cn/index/images/pic/banner10.jpg&quot;) center center no-repeat; float: left; width: 1200px;">
                    </div>
                    <div class="swiper-slide"
                        style="background: url(&quot;https://www.12306.cn/index/images/pic/banner12.jpg&quot;) center center no-repeat; float: left; width: 1200px;">
                    </div>

                </div>
                <div class="swiper-pagination"></div>
            </div>
            <!-- 车票信息搜索区域 -->
            <div class="info-search"></div>
        </div>
    </div>
</body>

</html>